// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "refactor/common-refactor.scss" as deprecated;
@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;

.dashboard-section {
  display: flex;
  inline-size: 100%;
  justify-content: center;
  align-items: center;
}

.dashboard-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-inline-size: $sz-500;
  margin-block-end: var(--sp-xxxl);
  inline-size: px2rem(580);
  margin: px2rem(92) auto px2rem(120) auto;
  justify-content: center;
}

.membership-container {
  margin-block-start: var(--sp-l);
}

.membership {
  align-items: center;
  display: flex;
  margin-block-start: var(--sp-s);
}

.membership.first {
  margin-block-start: var(--sp-l);
}

.membership-date {
  @include t.use-typography("body-small");
  color: var(--color-foreground-secondary);
  margin-inline-start: var(--sp-s);
}

.subscription-member,
.penpot-member {
  @extend .button-icon;
}

.penpot-member {
  stroke: var(--icon-foreground);
}

.subscription-member {
  stroke: var(--color-badge-premium);
}

.title-section {
  @include t.use-typography("title-large");
  color: var(--color-foreground-primary);
  margin-block-end: var(--sp-xxl);
}

.plan-section-title {
  @include t.use-typography("headline-small");
  color: var(--color-foreground-primary);
}

.plan-card {
  border: $b-1 solid var(--color-background-quaternary);
  border-radius: var(--sp-s);
  margin-block-start: var(--sp-l);
  padding: var(--sp-l);
}

.plan-card-highlight {
  background-color: var(--color-background-tertiary);
  border: $b-1 solid var(--color-accent-select);
}

.plan-card-header {
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--sp-m);
}

.plan-card-title-container {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
}

.plan-title-icon {
  @extend .button-icon;
  stroke: var(--color-foreground-primary);
  block-size: var(--sp-xl);
  inline-size: var(--sp-xl);
  border-radius: 6px;
  border: 1.75px solid var(--color-foreground-primary);
  stroke-width: 2.25px;
  padding: deprecated.$s-1;

  svg {
    block-size: var(--sp-m);
    inline-size: var(--sp-m);
  }
}

.plan-card-title,
.plan-price-value {
  @include t.use-typography("title-medium");
  color: var(--color-foreground-primary);
}

.plan-editors {
  @include t.use-typography("body-medium");
  align-self: end;
  color: var(--color-foreground-primary);
  margin-block-end: 2px;
}

.plan-price-period {
  @include t.use-typography("body-small");
  color: var(--color-foreground-primary);
}

.benefits-list {
  margin-block: 0;
}

.benefits-title,
.benefit {
  @include t.use-typography("body-medium");
  color: var(--color-foreground-secondary);
}

.other-subscriptions {
  margin-block-start: px2rem(52);
}

.cta-button {
  @include t.use-typography("body-medium");
  @include deprecated.buttonStyle;
  align-items: center;
  color: var(--color-accent-primary);
  display: flex;
  margin-block-start: var(--sp-m);
  text-align: left;
}

.cta-button svg {
  @extend .button-icon;
  block-size: var(--sp-l);
  inline-size: var(--sp-l);
  stroke: var(--color-accent-primary);
  margin-inline-start: var(--sp-xs);
}

.icon-dropdown svg {
  transform: rotate(90deg);
}

.bottom-link {
  margin-block-start: var(--sp-xs);
}

.bottom-button {
  margin-block-start: var(--sp-xl);
}

.modal-overlay {
  @extend .modal-overlay-base;
}

.modal-dialog {
  @extend .modal-container-base;
  max-block-size: initial;
  min-inline-size: px2rem(548);
}

.modal-dialog.subscription-success {
  min-inline-size: px2rem(648);
}

.close-btn {
  @extend .modal-close-btn-base;
}

.modal-title {
  @include t.use-typography("title-large");
  margin-block-end: var(--sp-xxxl);
  color: var(--modal-title-foreground-color);
  display: flex;
  gap: var(--sp-m);
}

.subscription-title {
  margin-block-end: var(--sp-l);
}

.modal-text-medium {
  @include t.use-typography("body-medium");
}

.modal-text-cap {
  margin-inline-end: var(--sp-s);
}

.text-strikethrough {
  text-decoration: line-through;
}

.modal-text-medium strong,
.text-strikethrough strong,
.modal-text-cap strong {
  font-weight: deprecated.$fw700;
}

.modal-content,
.modal-end {
  color: var(--color-foreground-secondary);
  display: flex;
  flex-direction: column;
}

.modal-success-content {
  display: flex;
  gap: $sz-40;
}

.modal-footer {
  margin-block-start: $sz-40;
}

.action-buttons {
  @extend .modal-action-btns;
}

.success-action-buttons {
  margin-block-start: var(--sp-l);
}

.primary-button {
  @extend .modal-accept-btn;
  min-block-size: $sz-32;
  block-size: auto;
}

.cancel-button {
  @extend .modal-cancel-btn;
  min-block-size: $sz-32;
  white-space: break-spaces;
  block-size: auto;
}

.modal-start {
  display: flex;
  justify-content: center;
  max-inline-size: $sz-224;

  svg {
    inline-size: 100%;
    block-size: auto;
  }

  @media (max-inline-size: 992px) {
    display: none;
  }
}

.editors-text {
  @include t.use-typography("body-medium");
  margin: 0;
}

.editors-list-warning {
  margin-inline-start: var(--sp-xl);
  margin-block: var(--sp-s);
}

.editors-list {
  @include t.use-typography("body-medium");
  list-style-position: inside;
  list-style-type: none;
  margin-inline-start: var(--sp-xl);
  max-block-size: px2rem(216);
  overflow-y: auto;
}

.input-field {
  --input-icon-padding: var(--sp-s);
  inline-size: px2rem(80);
}

.error-message {
  @include t.use-typography("body-small");
  color: var(--color-foreground-error);
  margin-block-start: var(--sp-s);
}

.editors-wrapper {
  align-items: center;
  display: flex;
  gap: var(--sp-xl);
  margin-block-start: var(--sp-l);
}

.editors-cost {
  display: flex;
  flex-direction: column;
}

.unlimited-capped-warning {
  @include t.use-typography("body-small");
  background-color: var(--color-background-tertiary);
  border-radius: var(--sp-s);
  margin-block-start: $sz-40;
  padding-block: var(--sp-s);
  padding-inline: var(--sp-m);
}

.show-editors-button {
  padding-inline: 0;
}
